<template>
  <div class="screen-top-left1">
    <!-- <div class="screen-top-header flex-l">
      <div class="header-left flex-c">
        <i class="iconfont icon-tongji4"></i>
      </div>
      <div class="header-right flex-l">
        <span class="header-title" @click="$router.push('/')">本月上传情况</span>
        <dv-decoration-3 class="dv-dec-3" />
      </div>
    </div> -->
    <div class="screen-top-chart">
      <!-- <Chart :chart-data="chartData" /> -->
      <Echart :options="pieOptionsData" :height="300" />
    </div>
    <!-- <div class="screen-top-data">
      <div class="flex-l yeartitle">
        <span class="header-title" @click="$router.push('/')">本月连续三天未上传视频班组</span>
      </div>
      <dv-scroll-ranking-board class="dv-scr-rank-board" :config="config" />
     
    </div> -->
    <!-- <div class="data-item" v-for="(item, index) in state.dynamicDataList" :key="index">
        <div class="data-item-top flex-l">
          <dv-digital-flop class="dv-digital-flop" :config="item.config" />
        </div>
        <div class="data-item-bottom flex-c">
          <span class="data-item-title"> {{ item.text }} </span>
        </div>
      </div> -->
  </div>
</template>

<script setup lang="ts">
// import Chart from './chart/ChartTopLeft1.vue'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { getCurrentThreeDayReportApi, getUpCurrentMonthReportApi } from '@/api/screen'
import { Echart } from '@/components/Echart'
import { EChartsOption } from 'echarts'
import { set } from 'lodash-es'
type DataObj = {
  number: number
  text: string
}
const config = reactive({
  carousel: 'single',
  unit: '条',
  rowNum: 3,
  data: []
})
// const iconFontArr = ['icon-diagnose', 'icon-monitoring', 'icon-cloudupload', 'icon-clouddownload']
// const state = reactive({
//   dataList: [
//     {
//       number: 3250,
//       text: '今日违章人数'
//     },
//     {
//       number: 11122,
//       text: '本周违章人数'
//     },
//     {
//       number: 36788,
//       text: '本月违章人数'
//     },
//     {
//       number: 152234,
//       text: '本季度违章人数'
//     }
//   ] as Array<DataObj>,
//   dynamicDataList: [] as Array<any>,
//   intervalInstance: 0
// })

// const chartData = reactive({
//   titleArr: ['班组1', '班组2', '班组3', '班组4', '班组5', '班组6'],
//   dataArr: [
//     { value: 11496, name: '班组1' },
//     { value: 7884, name: '班组2' },
//     { value: 5724, name: '班组3' },
//     { value: 5033, name: '班组4' },
//     { value: 4345, name: '班组5' },
//     { value: 4224, name: '班组6' }
//   ]
// })
const chartData = reactive({
  category: [] as Array<string>,
  lineData: [],
  barData: [] as Array<number>,
  rateData: [] as Array<string>
})
const pieOptions: EChartsOption = {
  title: {
    // text: '通过率',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c} ({d}%)' //{a} <br/>
  },
  legend: {
    orient: 'horizontal',
    // left: 'top',
    // x: 'right',
    y: 'bottom',
    textStyle: {
      //图例文字的样式
      color: '#fff',
      fontSize: 12
    },
    data: []
  },

  series: [
    {
      radius: [20, 70],
      center: ['50%', '40%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8,
        normal: {
          label: {
            textStyle: {
              color: '#FFFFFF', //用这个属性改变字体颜色
              fontSize: 14
            }
          }
        }
      },
      name: '本月上传',
      type: 'pie',
      // radius: '55%',

      data: []
    }
  ]
}
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
interface pieDt {
  name: string
  value: number
  lable: string
}
const getUpCurrentMonthReport = async () => {
  const res = await getUpCurrentMonthReportApi()
  console.log(res)
  // res.data?.map((item) => {
  //   chartData.barData.push(item.count)
  //   chartData.category.push(item.depName)
  // })
  let depNames: string[] = []
  let vals: pieDt[] = []
  res.data?.map((item) => {
    if (item.depName) {
      depNames.push(item.depName)
      vals.push({
        name: item.depName,
        value: item.count,
        lable: '#1370fb'
      })
    }
  })

  set(pieOptionsData, 'legend.data', depNames)
  pieOptionsData!.series![0].data = res.data.map((v) => {
    return {
      name: v.depName,
      value: v.count
      // itemStyle: { color: colorHex(handleColors()) }
    }
  })
}
getUpCurrentMonthReport()

// const getCurrentThreeDayReport = async () => {
//   const res = await getCurrentThreeDayReportApi()
//   if (res.data.length === 0) return
//   config.data = res.data?.map((e: any) => {
//     return {
//       name: e.depName,
//       value: e.count
//     }
//   })
// }
// getCurrentThreeDayReport()
// onMounted(() => {
//   // configList()
//   // changeTiming()
//   // getCurrentYearReport()
// })

// onUnmounted(() => {
//   window.clearInterval(state.intervalInstance)
// })

// const configList = () => {
//   state.dataList.forEach((e: DataObj) => {
//     state.dynamicDataList.push({
//       config: {
//         number: [e.number],
//         toFixed: 0,
//         content: '{nt}',
//         style: {
//           fontSize: 20
//         }
//       },
//       text: e.text
//     })
//   })
// }

// const changeTiming = () => {
//   state.intervalInstance = window.setInterval(() => {
//     changeNumber()
//   }, 2000)
// }

// const changeNumber = () => {
//   state.dynamicDataList.forEach((item, index) => {
//     item.config.number[0] += ++index
//     item.config = { ...item.config }
//   })
// }
</script>

<style lang="scss" scoped>
@import '/src/assets/scss/common/variables.scss';
.flex-l {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.screen-top-left1 {
  // 这里高度减去上下margin的高度之和
  height: $box-height1;
  // width: $box-width2;
  // background-color: $theme-sub-color;
  margin: 5px;
  border-radius: 10px;

  .screen-top-header {
    height: $chart-header-height;

    .header-right {
      width: calc(100% - 30px);

      .dv-dec-3 {
        width: 50px;
        height: 20px;
        margin-left: 10px;
      }
    }
  }
  .header-left {
    // width: 30px;
    width: 10px;
  }
  .header-title {
    color: #fff;
    font-size: $base-font-size;
    cursor: pointer;
  }
  .screen-top-data {
    .data-item {
      width: 50%;
      height: 70px;

      .data-item-top {
        height: 50%;
        padding-left: 10px;

        .dv-digital-flop {
          width: 80%;
          height: 30px;
        }
      }

      .data-item-bottom {
        height: 50%;

        .data-item-title {
          color: #d3d6dd;
          font-size: $sm-font-size;
          margin-left: 20px;
        }

        .data-item-unit {
          color: #9fe6b8;
        }
      }
    }
  }
  .dv-scr-rank-board {
    margin: 0 20px;
    height: 120px;
    width: 94%;
  }
  .yeartitle {
    margin: 10px;
    margin-bottom: 0;
  }
  .screen-top-chart {
    // margin-top: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}
</style>
